<script setup lang="ts">
import type { Props, Emits } from './utils/types'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import APIWallet from '@/api/wallet'
import APIWorks from '@/api/works'

const dialogVisible = shallowRef(false)
const $props = defineProps<Props>()
const $emit = defineEmits<Emits>()


const loading = inject<Ref<boolean>>('loadingWBO')
const worksBasicOrder = inject<Ref<any>>('worksBasicOrder')

watch($props, (newValue) => {
    dialogVisible.value = newValue.modelValue
}, { immediate: true })

watch(dialogVisible, (newValue) => {
    $emit('update:modelValue', newValue)
})

const $router = useRouter()

const walletNumber = shallowRef<number>(0)

function getWallet() {
    APIWallet.getWallet().then(({ data }) => {
        walletNumber.value = data.Wallet
    })
} getWallet()

function onBeforeClose() {
    confirmed.value = undefined
    dialogVisible.value = false
}

const confirmed = shallowRef<any>()

function submitPay() {
    if (!confirmed.value) return ElMessage.error('请先勾选确认订单信息，并认可《心安元素授权服务协议》及《产品退款规则》')

    const data = {
        order: JSON.stringify(worksBasicOrder?.value),
        total_amount: worksBasicOrder?.value.price,
        goods_id: worksBasicOrder?.value.goods_id,
        type: worksBasicOrder?.value.type
    }
    APIWorks.setBccrOrder(data).then(() => {
        return ElMessageBox.confirm(
            '支付成功',
            '提示',
            {
                confirmButtonText: '查看订单',
                cancelButtonText: '取消',
                type: 'success',
            }
        )
    }).then(() => {
        $router.push({
            name: 'Order'
        })
    }).catch(() => {
        ElMessage.info('已取消')
    })
}

</script>

<template>
    <el-dialog class="upload-blockchain" v-model="dialogVisible" title="上传区块链存证信息" width="1000" destroy-on-close
        :before-close="onBeforeClose" :show-close="false">
        <template #header>
            <DialogClose title="上传区块链存证信息" @close="onBeforeClose" />
        </template>
        <div v-loading="loading">
            <div class="upload-blockchain-top">
                <div class="video">
                    <video v-if="worksBasicOrder.file" controls :src="worksBasicOrder.file"></video>
                </div>
                <div class="video-info">
                    <div class="video-info-title">
                        产品信息：
                    </div>
                    <div class="video-info-item">
                        名 字：{{ worksBasicOrder.title }}
                    </div>
                    <div class="video-info-item">
                        类 型：视频素材
                    </div>
                    <div class="video-info-item">
                        编 号：{{ worksBasicOrder.goods_code }}
                    </div>
                </div>
            </div>
            <div class="upload-blockchain-money">
                <div></div>
                <div>本订单才有余额抵扣（当前账户余额 <span>￥{{ walletNumber }}</span> 元）
                    请保证有足够的余额，余额不够时，请点击“<span>充值</span>”来增加余额）</div>
            </div>
            <div class="upload-blockchain-sum">
                <div>应付金额：</div>
                <div>￥{{ worksBasicOrder.price }}</div>
            </div>
            <div class="upload-blockchain-affirm">
                <el-radio :value="true" size="large" v-model="confirmed" text-color="#606266">
                    <div style="color: #606266;">确认订单信息，并认可<span class="active">《心安元素授权服务协议》</span>及<span
                            class="active">《产品退款规则》</span></div>
                </el-radio>
            </div>
            <div class="upload-blockchain-btn">
                <button @click="submitPay">支付</button>
            </div>
        </div>

    </el-dialog>
</template>

<style lang="scss" scoped>
.upload-blockchain {

    .upload-blockchain-btn {
        display: flex;

        button {
            width: 176px;
            height: 50px;
            border-radius: 5px;
            background-color: rgba(249, 20, 20, 1);
            color: rgba(255, 255, 255, 1);
            font-size: 14px;
            text-align: center;
            border: none;
            cursor: pointer;
            margin-left: auto;
            margin-right: 42px;
        }
    }

    .upload-blockchain-affirm {
        display: flex;
        justify-content: flex-end;
        margin-right: 42px;

        .active {
            color: #3894FF;
        }
    }

    .upload-blockchain-sum {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        margin-right: 42px;
        margin-top: 10px;

        div {
            &:nth-child(1) {
                color: rgba(16, 16, 16, 1);
                font-size: 14px;
            }

            &:nth-child(2) {
                color: rgba(249, 20, 20, 1);
                font-size: 36px;
                line-height: 1em;
                font-weight: 700;
            }
        }
    }

    .upload-blockchain-money {
        display: flex;
        justify-content: center;
        gap: 0 16px;
        margin-top: 56px;

        div {
            &:nth-child(1) {
                width: 4px;
                height: 50px;
                background-color: #FF0000;
            }

            &:nth-child(2) {
                width: 860px;
                height: 50px;
                line-height: 50px;
                border-radius: 5px;
                background-color: rgba(238, 238, 239, 1);
                border: 1px dashed rgba(187, 187, 187, 1);
                font-size: 14px;
                color: #3894FF;
                text-align: center;

                span {
                    color: #F91414;
                    cursor: pointer;
                }
            }
        }
    }

    .upload-blockchain-top {
        display: flex;
        gap: 0 44px;

        .video-info {
            color: rgba(16, 16, 16, 1);

            .video-info-title {
                color: rgba(16, 16, 16, 1);
                font-size: 14px;
                display: flex;
                align-items: center;
                line-height: 20px;
                margin-bottom: 10px;

                &::before {
                    content: '';
                    display: block;
                    width: 3px;
                    height: 14px;
                    background-color: #FF0000;
                    margin-right: 8px;
                }
            }

            .video-info-item {
                color: rgba(16, 16, 16, 1);
                line-height: 35px;
                font-size: 14px;
            }
        }

        .video {
            width: 256px;
            height: 256px;
            background-color: #eeeeee;
            display: flex;
            align-items: center;

            video {
                width: 100%;
                height: 143px;
                object-fit: cover;
            }
        }
    }

}
</style>
